<script setup lang="ts">
import{reactive,ref} from 'vue'
// 头部信息定义
const name = "王彪儿子王宁"; 
const msg = "Hello World";
const age = 20;
const count = 10;
const price = 5;
const isMarry: boolean = true;
const skill = "打他father";
const monry = 0;
//声明函数
const getContent = () => {
  return "好大儿子王宁";
};
// 定义一个点击的函数
const clickFn = (a: number,b: number,c: number) => {
  alert("点我干嘛" + a)
}
const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log("值改变了", inputDom.value)
}
// 键盘事件对象 取自MDN-官方的W3c的标准文档
const enterClick = (event: Event) => {
  const obj = event as KeyboardEvent
  // const inputDom = event.target as HTMLInputElement
  if(obj.key === "Enter") {
    alert("您点击了回车")
  }
}

//性别修改
const seperate = () => {
  isMarried.value = false  //已婚未婚状态
}
const changeSex = () => {
  person.sex = "女"; //男女状态初始值
}
// 人类对象
const groupPeople = () => {
  people.value.money -= 100000  //财产
  people.value.childCount += 1
  people.value.weight += 10
  people.value.height -= 2
}

const person = reactive<{
  name: string,
  age: number,
  sex: "男" | "女"
}>({
  name: "王宁",
  age: 24,
  sex: "男"
})
// ref声明 简单或复杂数据类型  ref信息  头部信息声明
const isMarried = ref(false)
const people = ref<{ name: string, height: number, weight: number, money: number, childCount: number }>({
  name: '王宁',
  height: 185,
  weight: 60,
  money: 66666666666,
  childCount: 6
})
</script>

<template>
  <div class="container">
    <!-- 差值表达式 -->
    {{ (msg + "vue3").split("").reverse().join("") }}
    <p>姓名{{ name }}</p>
    <p>年龄{{ age }}</p>
    <p>{{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态{{ monry || "穷光蛋" }}</p>
    <p>技能{{ skill }}</p>
    <p>总价{{ count * price }}</p>
    <p>函数调用:{{ getContent() }}</p>

    <button v-on:click="clickFn(1,2,3)">测试</button>
   <!-- 完整写法v-on:事件名="方法名" -->
   <!-- 语法糖的写法 @click -->
   <button @click="clickFn(1,2,3)">测试</button>
   <!-- change/input -->
   <input type="text" @change="changeValue" @keydown="enterClick" >
   <h1>响应式数据Reactive</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
     <button @click="person.sex = '女'">变性</button>
     <button @click="changeSex">变性</button>
  </div>
 <!-- 点击切换状态 -->
  <h1>Ref响应式数据-简单数据类型</h1>
    <p>婚姻状态：{{ isMarried ? "已婚" : "单身🐶" }}</p>
    <button @click="isMarried = true">成家</button>
    <button @click="seperate">离婚</button>

    <!--ref响应数据  -->
    <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名：{{ people.name }}</p>
    <p>身高{{ people.height }}cm</p>
    <p>体重{{ people.weight }}kg</p>
    <p>财产：{{ people.money }}$</p>
    <p>儿女个数：{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>

</template>

<style scoped>
.container {
  font-size: 30px;
  color: blue;
  font-weight: bolder;
}
</style>
